<template>
	<view>
		<!-- 自定义导航栏 -->
		<CustomNavBar title="惠商城" @search-click="handleSearchClick" />


		<view class="list">
			<!-- 左侧滑动 -->
			<scroll-view scroll-y="true" class="list-left">
				<view v-for="i in 10" class="left-item">
					<view class="left-name">{{i}}</view>
				</view>
			</scroll-view>

			<!-- 右侧滑动 -->
			<scroll-view scroll-y="true" class="list-right">
				<view v-for="i in 10">
					<view>{{i}}</view>
				</view>
			</scroll-view>

		</view>

	</view>
</template>

<script>
	import CustomNavBar from '@/components/common/CustomNavBar.vue'
	export default {
		data() {
			return {
				data1: [{
						id: 0,
						name: "手机",
						category: [
							"小米 15",
							"小米 14",
							"小米 13"
						]
					},
					{
						id: 1,
						name: "手表",
						category: [
							"小米手环",
							"Redmi Bude",
							"儿童手表"
						]
					},
					{
						id: 2,
						name: "家电",
						category: [
							"洗衣机",
							"电饭煲",
							"扫地机",
							"智能窗帘",
							"洗碗机"
						]
					},
					{
						id: 3,
						name: "家电",
						category: [
							"洗衣机",
							"电饭煲",
							"扫地机",
							"智能窗帘",
							"洗碗机"
						]
					},

				]
			}
		},
		methods: {
			handleSearchClick() {
				// 跳转到搜索页面
				uni.redirectTo({
					url: '/pages/search/search'
				});
			}
		},
		components: {
			CustomNavBar
		}
	}
</script>

<style scoped>
	.list{
		display: flex;
	}
	.list-left{
		width: 200rpx;
	}
	.list-right{
		flex-grow: 1;
	}
	.left-item{
		border-bottom: 2rpx solid #ffffff;
		font-size: 28rpx;
		background-color: #f7f7f7;
	}
	.left-name{
		padding: 30rpx 6rpx;
		text-align: center;
	}
	.left-name-actvie{
		border-left:10rpx solid #ff6969 ;
	}
</style>